<template>
    <div>

      <router-link
        tag="div"
        class="header-abs"
        to="/"
        v-show="showAbs"
      >
        <div class="iconfont header-abs-back">&#xe624;</div>
      </router-link>

      <div class="header-fixed"
           v-show="!showAbs"
           :style="opacityStyle"
      >
        <router-link to="/">
          <div class="iconfont header-fixed-back">&#xe624;</div>
        </router-link>
        景点详情
      </div>

    </div>
</template>

<script>

    export default{
        name:'DetailHeader',
        data(){
            return{
              showAbs:true,
              opacityStyle:{
                opacity:0
              }
            }
        },
        methods:{
          handleScroll(){
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 60){
              let opacity = scrollTop/140;
              opacity = (opacity > 1) ? 1 : opacity;
              this.opacityStyle = {
                opacity:opacity
              };
              this.showAbs = false
            } else{
              this.showAbs = true
            }
          }
        },
        activated(){
          window.addEventListener('scroll',this.handleScroll)
        },
        deactivated(){
          window.removeEventListener('scroll',this.handleScroll);
        }
    }
</script>

<style rel="stylesheet/stylus" lang="stylus" scoped>
  @import "~styles/varibles.styl"
    .header-abs
      position: absolute
      left: .2rem
      top: .2rem
      width: .8rem
      height: .8rem
      line-height: .8rem
      text-align: center
      border-radius: .4rem
      background-color: rgba(0,0,0,.8)
      .header-abs-back
        color: #fff
        font-size .4rem
    .header-fixed
      z-index:2
      position:fixed
      top:0
      left:0
      right:0
      height: $headerHeight
      line-height: .86rem
      background-color: $bgColor
      color: #ffffff
      text-align: center
      font-size: .32rem
      .header-fixed-back
        position:absolute
        width: .64rem
        text-align: center
        font-size: .4rem
        top: 0
        left: 0
        color: #fff
</style>
